<template>
    <div class="cloud-container">
        <div class="header">
            <div v-if="!isLoggedIn" class="login-register">
                <el-button type="primary" @click="goToLogin">登录</el-button>
                <el-button @click="goToRegister">注册</el-button>
            </div>
            <div v-else class="login-register">
                <el-dropdown trigger="click">
                    <div class="user-dropdown-link">
                        <span class="user-name">{{ username }}</span>
                        <el-icon class="el-icon--right">
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-button v-if="role === 'admin'" @click="goToAdmin">后台管理</el-button>
            </div>
            <h1>在线云盘分享系统</h1>
            <p>简单、快捷的文件分享工具</p>
        </div>

        <div class="features">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card class="feature-card" shadow="hover" @click="goToUpload">
                        <div class="feature-icon">
                            <el-icon :size="50"><upload-filled /></el-icon>
                        </div>
                        <div class="feature-title">上传文件</div>
                        <div class="feature-desc">上传文件并获取4位访问码分享给他人</div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="feature-card" shadow="hover" @click="goToDownload">
                        <div class="feature-icon">
                            <el-icon :size="50">
                                <download />
                            </el-icon>
                        </div>
                        <div class="feature-title">下载文件</div>
                        <div class="feature-desc">输入4位访问码下载分享的文件</div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div class="instructions">
            <h2>使用说明</h2>
            <ol>
                <li>上传文件：点击"上传文件"卡片，选择要分享的文件进行上传</li>
                <li>获取访问码：上传成功后，系统会生成4位访问码</li>
                <li>分享文件：将访问码或分享链接发送给需要接收文件的人</li>
                <li>下载文件：接收方点击"下载文件"卡片，输入4位访问码即可下载文件</li>
            </ol>
        </div>
    </div>
</template>

<script setup>
import { UploadFilled, Download, ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import http from '@/utils/request'
import list from '@/utils/url'
import { ElMessage } from 'element-plus'

const router = useRouter()
const username = ref('')
const isLoggedIn = ref(false)
const role = ref('')

const checkLoginStatus = () => {
    const token = localStorage.getItem('token')
    const storedUsername = localStorage.getItem('username')
    const storedRole = localStorage.getItem('role')
    
    if (token && storedUsername && storedRole) {
        username.value = storedUsername
        role.value = storedRole
        isLoggedIn.value = true
    } else {
        username.value = ''
        role.value = ''
        isLoggedIn.value = false
    }
}

const handleLogout = () => {
    http.get(list.list_user_api.logout).then(() => {
        // 不管响应如何，清除本地存储
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        localStorage.removeItem('role')
        isLoggedIn.value = false
        ElMessage.success('退出登录成功')
        router.push('/login')
    }).catch(() => {
        // 发生错误时也清除本地存储
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        localStorage.removeItem('role')
        isLoggedIn.value = false
        router.push('/login')
    })
}

const goToUpload = () => {
    router.push('/cloud/upload')
}

const goToDownload = () => {
    router.push('/cloud/download')
}

const goToLogin = () => {
    router.push('/login')
}

const goToRegister = () => {
    router.push({ path: '/login', query: { mode: 'register' } })
}

const goToAdmin = () => {
    router.push('/admin')
}

onMounted(() => {
    checkLoginStatus()
})
</script>

<style scoped>
.cloud-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.login-register {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.user-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--el-color-primary);
    font-weight: 500;
}

.user-name {
    margin-right: 5px;
}

:deep(.el-dropdown-menu__item) {
    line-height: 1.5;
    padding: 8px 20px;
}

:deep(.el-icon--right) {
    transition: transform 0.3s;
}

:deep(.el-dropdown.is-active .el-icon--right) {
    transform: rotate(180deg);
}

.header h1 {
    color: var(--el-color-primary);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.header p {
    color: #606266;
    font-size: 1.2rem;
}

.features {
    margin-bottom: 3rem;
}

.feature-card {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    color: var(--el-color-primary);
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.feature-desc {
    color: #606266;
    text-align: center;
}

.instructions {
    background-color: #f5f7fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.instructions h2 {
    color: var(--el-color-primary);
    margin-bottom: 1rem;
}

.instructions ol {
    padding-left: 1.5rem;
}

.instructions li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
</style>